<template>
    <div>
        <el-dialog v-model="isShowAdd" title="添加商品" width="800">
            <div></div>
            <div>
                <el-steps :active="pageType" align-center>
                    <el-step title="商品基本信息"/>
                    <el-step title="添加规格参数模板"/>
                    <el-step title="添加库存信息"/>
                    <el-step title="添加规格参数信息"/>
                </el-steps> 
            </div>
            <spu-basic-info v-if="pageType===PageType.SpuBasicInfo"/>
            <sku-info v-if="pageType===PageType.SkuInfo"/>
            <params-template v-if="pageType===PageType.ParamsTemplete"/>
            <params-info v-if="pageType===PageType.ParamsInfo"/>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowAdd = false">取消</el-button>
                    <el-button type="primary" @click="isShowAdd = false">
                    确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {ElSteps , ElStep} from "element-plus"
import { ref } from "vue";

import { PageType } from "../types"
const pageType  = ref(PageType.SpuBasicInfo);
import SpuBasicInfo from "./spu-basic-info.vue";
import SkuInfo from "./sku-info.vue";
import ParamsTemplate from "./params-templete.vue";
import ParamsInfo from "./params-info.vue";

const isShowAdd = defineModel("isShowAdd");
</script>

<style scoped>

</style>